
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(new GridPage());

class GridPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    ///标题布局
    Widget left = _buildExpendContainer(_buildText('返回'));
    Widget center = _buildText('标题');
    Widget right = _buildText('操作');
    Widget titleBar = _buildHorizontalItemBar(left, center, right);
    Widget bar = _buildHeaderBar(titleBar);

    //Body
    Widget textWidget =_buildText('一堆文字');
    Widget centerContainer = _buildCenter(textWidget);
    Widget expendContainer = _buildExpendContainer(centerContainer);
    //上下布局
    Widget verticalContainer = _buildVerticalContainer(bar, _buildHieghtContainer(_buildHorizontalListView()));
    //跟布局
    Widget container = _buildContainer(verticalContainer);
    return container;
  }

  Widget _buildContainer(Widget widget){
    return new Container(child: widget,);
  }

  Widget _buildText(String text){
    return new Text(text, textDirection: TextDirection.ltr,);
  }

  Widget _buildVerticalContainer(Widget header, Widget body){
    return new Column(
      children: <Widget>[
        header,body],);
  }

  Widget _buildHeaderBar(child){
    return new Bar(child: child);
  }

  /// 让子控件居中布局
  Widget _buildCenter(Widget child){
    return new Center(child: child,);
  }

  /// Expanded可以让空间去撑满，相当于march_parent
  Widget _buildExpendContainer(child){
    return new Expanded(child: child);
  }

  /// 横向分布一定要指定布局方向textDirection
  Widget _buildHorizontalItemBar(left, center, right) {
    return new Row(children: <Widget>[left, center, right],
      textDirection: TextDirection.ltr,);
  }

  Widget _buildHorizontalListView(){
    return new ListView(scrollDirection: Axis.horizontal,children: <Widget>[new Container(
      width: 160.0,
      color: Colors.red,
    ),
      new Container(
        width: 160.0,
        color: Colors.blue,
      ),
      new Container(
        width: 160.0,
        color: Colors.green,
      ),
      new Container(
        width: 160.0,
        color: Colors.yellow,
      ),
      new Container(
        width: 160.0,
        color: Colors.orange,
      ),],);
  }

  Widget _buildHieghtContainer(child){
    return new Container(child: child,height: 200,);
  }
}

class Bar extends StatelessWidget{

  final Widget child;

  const Bar({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 80,
      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 15),
      decoration: new BoxDecoration(color: Colors.blue),child: child,);
  }

}